<script setup lang="ts">
  import { ref } from 'vue';

  const emits = defineEmits(['update']);
  const baseNameMap = {
    id: { key: 'id', label: '学员ID', placeholder: '' },
    name: { key: 'name', label: '学员姓名', placeholder: '请输入学员姓名' },
    gender: { key: 'gender', label: '学员性别', placeholder: '请选择学员性别' },
    birthday: {
      key: 'birthday',
      label: '出生日期',
      placeholder: '请选择出生日期',
    },
    nation: { key: 'nation', label: '民族', placeholder: '请选择民族' },
    native: { key: 'native', label: '籍贯', placeholder: '请选择籍贯' },
    marriage: {
      key: 'marriage',
      label: '婚姻状况',
      placeholder: '请选择婚姻状况',
    },
    politics: {
      key: 'politics',
      label: '政治面貌',
      placeholder: '请选择政治面貌',
    },
    education: {
      key: 'education',
      label: '文化程度',
      placeholder: '请选择文化程度',
    },
    phone: { key: 'phone', label: '联系电话', placeholder: '请输入联系电话' },
    address: {
      key: 'address',
      label: '家庭住址',
      placeholder: '请输入家庭住址',
    },
    zipCode: {
      key: 'zipCode',
      label: '邮政编码',
      placeholder: '请输入邮政编码',
    },
    idCard: { key: 'idCard', label: '身份证号', placeholder: '请输入身份证号' },
    household: {
      key: 'household',
      label: '户口所在镇/街道',
      placeholder: '请输入户口所在镇/街道',
    },
    unemployment: {
      key: 'unemployment',
      label: '失业证或低保号码',
      placeholder: '请输入失业证或低保号码，没有填“无”',
    },
    disabilityCategory: {
      key: 'disabilityCategory',
      label: '伤残类别',
      placeholder: '请选择伤残类别',
    },
    disabilityLevel: {
      key: 'disabilityLevel',
      label: '伤残等级',
      placeholder: '请选择伤残等级',
    },
    proTraining: {
      key: 'proTraining',
      label: '受过何种专业训练',
      placeholder: '请输入受过何种专业训练，没有填“无”',
    },
  };

  const infoBase = ref<any>({});
  const infoFamily = ref<any[]>([]);
  const infoBaseFormRules = {};
</script>

<template>
  <div class="m-trainee-add">
    <div style="padding: 10px 15px">
      <div class="m-t-add-item m-t-add-base">
        <div class="title"><span>基本信息</span></div>
        <a-form
          :model="infoBase"
          layout="vertical"
          :wrapper-col-props="{ span: 3 }"
        >
          <!-- 1 -->
          <a-row justify="space-between">
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.name.key"
                :label="baseNameMap.name.label"
                required
              >
                <a-input
                  v-model="infoBase[baseNameMap.name.key]"
                  :placeholder="baseNameMap.name.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.gender.key"
                :label="baseNameMap.gender.label"
                required
              >
                <a-select
                  v-model="infoBase[baseNameMap.gender.key]"
                  :placeholder="baseNameMap.gender.placeholder"
                  allow-clear
                >
                  <a-option label="男" :value="1" />
                  <a-option label="女" :value="2" />
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.birthday.key"
                :label="baseNameMap.birthday.label"
                required
              >
                <a-date-picker
                  v-model="infoBase[baseNameMap.birthday.key]"
                  :placeholder="baseNameMap.birthday.placeholder"
                  style="width: 100%"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
          <!-- 2 -->
          <a-row justify="space-between">
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.nation.key"
                :label="baseNameMap.nation.label"
                required
              >
                <a-select
                  v-model="infoBase[baseNameMap.nation.key]"
                  :placeholder="baseNameMap.nation.placeholder"
                  allow-clear
                >
                  <a-option label="汉族" value="汉族" />
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.native.key"
                :label="baseNameMap.native.label"
                required
              >
                <a-select
                  v-model="infoBase[baseNameMap.native.key]"
                  :placeholder="baseNameMap.native.placeholder"
                  allow-clear
                >
                  <a-option label="山东" value="山东" />
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.marriage.key"
                :label="baseNameMap.marriage.label"
                required
              >
                <a-select
                  v-model="infoBase[baseNameMap.marriage.key]"
                  :placeholder="baseNameMap.marriage.placeholder"
                  allow-clear
                >
                  <a-option label="未婚" :value="0" />
                  <a-option label="已婚" :value="1" />
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <!-- 3 -->
          <a-row justify="space-between">
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.politics.key"
                :label="baseNameMap.politics.label"
                required
              >
                <a-select
                  v-model="infoBase[baseNameMap.politics.key]"
                  :placeholder="baseNameMap.politics.placeholder"
                  allow-clear
                >
                  <a-option label="党员" :value="1" />
                  <a-option label="群众" :value="2" />
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.education.key"
                :label="baseNameMap.education.label"
                required
              >
                <a-select
                  v-model="infoBase[baseNameMap.education.key]"
                  :placeholder="baseNameMap.education.placeholder"
                  allow-clear
                >
                  <a-option label="小学" :value="1" />
                  <a-option label="初中" :value="2" />
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.phone.key"
                :label="baseNameMap.phone.label"
                required
              >
                <a-input
                  v-model="infoBase[baseNameMap.phone.key]"
                  :placeholder="baseNameMap.phone.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
          <!-- 4 -->
          <a-row justify="space-between">
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.address.key"
                :label="baseNameMap.address.label"
                required
              >
                <a-input
                  v-model="infoBase[baseNameMap.address.key]"
                  :placeholder="baseNameMap.address.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.zipCode.key"
                :label="baseNameMap.zipCode.label"
                required
              >
                <a-input
                  v-model="infoBase[baseNameMap.zipCode.key]"
                  :placeholder="baseNameMap.zipCode.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.idCard.key"
                :label="baseNameMap.idCard.label"
                required
              >
                <a-input
                  v-model="infoBase[baseNameMap.idCard.key]"
                  :placeholder="baseNameMap.idCard.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
          <!-- 5 -->
          <a-row justify="space-between">
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.household.key"
                :label="baseNameMap.household.label"
                required
              >
                <a-input
                  v-model="infoBase[baseNameMap.household.key]"
                  :placeholder="baseNameMap.household.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.unemployment.key"
                :label="baseNameMap.unemployment.label"
                required
              >
                <a-input
                  v-model="infoBase[baseNameMap.unemployment.key]"
                  :placeholder="baseNameMap.unemployment.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.disabilityCategory.key"
                :label="baseNameMap.disabilityCategory.label"
                required
              >
                <a-select
                  v-model="infoBase[baseNameMap.disabilityCategory.key]"
                  :placeholder="baseNameMap.disabilityCategory.placeholder"
                  allow-clear
                >
                  <a-option label="轻度" :value="1" />
                  <a-option label="重度" :value="2" />
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <!-- 6 -->
          <a-row justify="space-between">
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.disabilityLevel.key"
                :label="baseNameMap.disabilityLevel.label"
                required
              >
                <a-select
                  v-model="infoBase[baseNameMap.disabilityLevel.key]"
                  :placeholder="baseNameMap.disabilityLevel.placeholder"
                  allow-clear
                >
                  <a-option label="一级" :value="1" />
                  <a-option label="二级" :value="2" />
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item
                :field="baseNameMap.proTraining.key"
                :label="baseNameMap.proTraining.label"
                required
              >
                <a-input
                  v-model="infoBase[baseNameMap.proTraining.key]"
                  :placeholder="baseNameMap.proTraining.placeholder"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="7"></a-col>
          </a-row>
        </a-form>
      </div>
      <div class="m-t-add-item m-t-add-family">
        <div class="title"><span>家庭情况（必填）</span></div>
      </div>
      <div class="m-t-add-item m-t-add-qualifications">
        <div class="title"><span>资质证件（必填）</span></div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .m-trainee-add {
    color: var(--color-text-1);
  }

  .m-t-add-item {
    margin: 10px 0;

    .title {
      margin-bottom: 5px;

      & > span {
        font-weight: 600;
        font-size: 15px;
      }
    }
  }
</style>
